<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-form-item label="用户名" prop="userName" >
        <el-input v-model="dataForm.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码" >
        <el-input name="password" type="password" v-model="dataForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="surePassword" label="确认密码" >
        <el-input type="password" v-model="dataForm.surePassword" placeholder="请输入确认密码"></el-input>
      </el-form-item>
      <el-form-item prop="avatar" label="商户头像" >
        <el-upload
          class="avatar-uploader"
          action="#"
          :multiple="false"
          :show-file-list="false"
          :http-request="uploadAvatar"
          :before-upload="beforeUploadAvatar">
          <img style="width: 50px; height: 50px;" v-if="dataForm.avatar" :src="dataForm.avatar" class="avatar">
          <i v-else >
            <el-button type="primary" plain>上传头像</el-button>
          </i>
        </el-upload>
      </el-form-item>
      <el-form-item prop="name" label="商户真实名称" >
        <el-input type="name" v-model="dataForm.name" placeholder="请输入商户真实名称"></el-input>
      </el-form-item>
      <el-form-item prop="qualificationMaterials" label="商户资质材料" >
        <el-upload
          class="upload-demo"
          action="#"
          :http-request="uploadQualificationMaterials"
          :before-upload="beforeUploadQualificationMaterials"
          :on-remove="removeQualificationMaterials"
          :file-list="qualificationMaterialsList"
          multiple>
          <el-button type="primary" plain>点击上传</el-button>
          <span slot="tip" class="el-upload__tip custom-tip">只能上传jpg/png文件，且不超过1MB</span>
        </el-upload>
      </el-form-item>

      <el-form-item prop="fixedTelephone" label="固定电话" >
        <el-input v-model="dataForm.fixedTelephone" placeholder="请输入固定电话"></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="手机号码" >
        <el-input v-model="dataForm.mobile" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱" >
        <el-input type="email" v-model="dataForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item prop="regions" label="地区" >
        <template>
          <el-select v-model="province" filterable placeholder="请选择省份" @change="getCity()">
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select style="margin-left: 9px;" v-model="city" filterable placeholder="请选择城市" @change="getArea()">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select style="margin-left: 9px;" v-model="area" filterable placeholder="请选择区县">
            <el-option
              v-for="item in areaList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select >
        </template>
      </el-form-item>
      <el-form-item prop="address" label="详细地址" >
        <el-input type="address" v-model="dataForm.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>

      <el-form-item label="角色" size="mini" prop="roleIdList">
        <el-checkbox-group v-model="dataForm.roleIdList">
          <!--入驻商户新增时，角色智能选择入驻商户-->
          <el-checkbox :disabled="role.id !=2" v-for="role in roleList" :key="role.id" :label="role.id">{{ role.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="状态" size="mini" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="0">禁用</el-radio>
          <el-radio :label="1">正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { isEmail, isMobile } from '@/utils/validate'
  import { select } from '@/api/mall-admin/mall-role'
  import { getUserById, saveAdmin, updateAdmin } from '@/api/mall-admin/mall-admin'
  import { getRegionList } from '@/api/mall-admin/mall-region'
  import {  fileUpload } from '@/api/mall-file/file'
  import { adminUserConstant } from "@/utils/constant";
  export default {
    data () {
      //密码校验
      var surePasswordValidator = (rule, value, callback) => {
        if (!value) {
          callback(new Error('确认密码不能为空'))
        } else if (this.dataForm.password !== value) {
          callback(new Error('确认密码与密码输入不一致'))
        } else {
          callback()
        }
      }
      //校验邮箱
      var validateEmail = (rule, value, callback) => {
        if (!isEmail(value)) {
          callback(new Error('邮箱格式错误'))
        } else {
          callback()
        }
      }
      //资质证明检验
      var qualificationMaterialsValidator = (rule, value, callback)=>{
        if (!this.qualificationMaterialsList || this.qualificationMaterialsList.length == 0) {
          callback(new Error('请上传商户资质材料！'))
        } else {
          callback()
        }
      }
      //地区检验
      var regionsValidator = (rule, value, callback)=>{
        if (!this.province || !this.city || !this.area) {
          callback(new Error('请选择地区!'))
        } else {
          callback()
        }
      }
      //检验手机号
      var validateMobile = (rule, value, callback) => {
        if (!isMobile(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }

      return {
        visible: false,
        roleList: [],
        dataForm: {
          id: 0,
          userName: '',//用户名
          password: '',//密码
          surePassword: '', //确认密码
          avatar: '', //头像
          name: '', //商户真实名称
          qualificationMaterials: '', //商户资质材料
          fixedTelephone: '', //固定电话
          mobile: '', //手机号码
          email: '', //邮箱
          regions: '', //所属区域id集合【1,2,3】
          address: '',//详细地址
          status: 1,
          roleIdList: []
        },
        qualificationMaterialsList:[], //商户资质材料列表
        provinceList: [], //省份
        province:"", //已选省份
        cityList: [], //城市
        city: "", //已选城市
        areaList: [], //区县
        area: "", //已选区县
        dataRule: {
          userName: [
            { required: true, message: '帐号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          avatar: [
            { required: true, message: '请上传头像', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '商户真实名称不能为空', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '手机号码不能为空', trigger: 'blur' },
            { validator: validateMobile, trigger: 'blur' }
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { validator: validateEmail, trigger: 'blur' }
          ],
          address: [
            { required: true, message: '详细地址不能为空', trigger: 'blur' }
          ],
          regions: [
            { required: true, validator:regionsValidator, trigger: 'blur' }
          ],
          qualificationMaterials: [
            { required: true, validator:qualificationMaterialsValidator, trigger: 'blur' }
          ],
          surePassword: [
            {required: true, validator:surePasswordValidator, trigger: 'blur'}
          ]
        }
      }
    },

    created () {
      this.getProvinceData();
    },

    methods: {
      init (id) {
        this.dataForm.id = id || 0
        select(this.axios.paramsHandler()).then(({data})=>{
          this.roleList = data && data.code === "200" ? data.data : []
        }).then(() => {
          this.visible = true;
          this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
          })
        }).then(() => {
          this.qualificationMaterialsList = []
          if (this.dataForm.id) {
            getUserById(this.axios.paramsHandler({id: this.dataForm.id})).then(async ({data}) => {
              if (data && data.code === "200") {
                this.dataForm = data.data
                this.dataForm.password = null;
                this.province = parseInt(this.dataForm.regions.split(",")[0]);
                await this.getCity()
                this.city = parseInt(this.dataForm.regions.split(",")[1]);
                await this.getArea()
                this.area = parseInt(this.dataForm.regions.split(",")[2]);
                var qualificationMaterials = this.dataForm.qualificationMaterials;
                if (qualificationMaterials) {
                  var qualificationMaterialsArray = qualificationMaterials.split(",");
                  for (var i=0; i<qualificationMaterialsArray.length; i++) {
                    this.qualificationMaterialsList.push({
                      name: qualificationMaterialsArray[i].substring(qualificationMaterialsArray[i].lastIndexOf("/")+20),
                      url: qualificationMaterialsArray[i]
                    });
                  }
                }
              }
            });
          }
        });
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            //需要特殊处理的字段
            var qualificationMaterials = ''; //商户资质材料
            var regions = this.province+","+this.city+","+this.area; //所属区域
            if (this.qualificationMaterialsList.length>0){
              this.qualificationMaterialsList.forEach(qualification=>{
                qualificationMaterials += qualification.url + ",";
              });
              qualificationMaterials = qualificationMaterials.substring(0,qualificationMaterials.length-1)
            }

            var saveOrUpdate = this.dataForm.id ? updateAdmin : saveAdmin;
            var data = this.axios.dataHandler({
              id: this.dataForm.id || undefined,
              userName: this.dataForm.userName,
              password: this.dataForm.password,
              userType: 1, //商户（店铺）管理员
              merchantType: 0, //入驻商户（店铺）
              avatar: this.dataForm.avatar, //头像
              name: this.dataForm.name, //商户真实名称
              qualificationMaterials: qualificationMaterials, //商户资质材料
              fixedTelephone: this.dataForm.fixedTelephone, //固定电话
              mobile: this.dataForm.mobile, //手机号码
              email: this.dataForm.email, //邮箱
              regions: regions, //所属区域id集合【1,2,3】
              address: this.dataForm.address,//详细地址
              status: this.dataForm.status,
              roleIdList: this.dataForm.roleIdList
            })
            saveOrUpdate(data).then(({data}) => {
              if (data && data.code === "200") {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            });
          }
        })
      },

      //获取（初始化）省份信息
      async getProvinceData() {
        this.dataListLoading = true
        var params =  this.axios.paramsHandler({parent_id: 0},false)
        await getRegionList(params).then(({data}) => {
          if (data && data.code === "200") {
            this.provinceList = data.data;
          }
          this.dataListLoading = false
        })
      },
      //获取城市信息
      async getCity(){
        this.dataListLoading = true
        var params =  this.axios.paramsHandler({parent_id: this.province},false)
        await getRegionList(params).then(({data}) => {
          if (data && data.code === "200") {
            this.city = null;
            this.area = null;
            this.cityList = data.data
            this.areaList = [];
          }
          this.dataListLoading = false
        })
      },
      //获取区县信息
      async getArea(){
        this.dataListLoading = true
        var params =  this.axios.paramsHandler({parent_id: this.city},false)
        await getRegionList(params).then(({data}) => {
          if (data && data.code === "200") {
            this.area = null;
            this.areaList = data.data
          }
          this.dataListLoading = false
        })
      },

      //上传头像
      uploadAvatar(file){
        let formData = new FormData();
        formData.append("files", file.file);
        var params = this.axios.paramsHandler({folderName: adminUserConstant.admin_user_avatar })
        fileUpload(formData, params).then(({data}) => {
          this.dataForm.avatar = data.data;
        })
      },
      //上传头像前判断
      beforeUploadAvatar(file){
        const isImg = (file.size / 1024 / 1024) < 1
        if (!isImg) {
          this.$message.error('上传头像图片大小不能超过 1MB!')
        }
        const isType = file.type === "image/png"
        const isType2 = file.type === "image/jpeg"
        if (!isType && !isType2) {
          this.$message.error('上传logo图片格式为png或jpg')
        }
        return (isType || isType2) && isImg
      },
      /**
       * 上传资质材料
       * @param file
       */
      uploadQualificationMaterials(file){
        let formData = new FormData();
        formData.append("files", file.file);
        var params = this.axios.paramsHandler({folderName: adminUserConstant.admin_qualification_materials })
        fileUpload(formData, params).then(({data}) => {
          this.qualificationMaterialsList.push({
            name:data.data.substring(data.data.lastIndexOf("/")+20),
            url: data.data
          });
        })
      },
      /**
       * 上传资质材料前
       * @returns {boolean}
       */
      beforeUploadQualificationMaterials(file){
        const isImg = (file.size / 1024 / 1024) < 1
        if (!isImg) {
          this.$message.error('上传头像图片大小不能超过 1MB!')
        }
        const isType = file.type === "image/png"
        const isType2 = file.type === "image/jpeg"
        if (!isType && !isType2) {
          this.$message.error('上传资质材料格式为png或jpg')
        }
        const fileNum = this.qualificationMaterialsList.length<5;
        if (!fileNum) {
          this.$message.error('最多只能上传5份资质材料')
        }
        return (isType || isType2) && isImg && fileNum
      },
      /**
       * 移除资质材料
       */
      removeQualificationMaterials(file, fileList){
        this.qualificationMaterialsList
          .splice(this.qualificationMaterialsList.findIndex(item=>{return item.url==file.url}), 1);
      },
    }
  }
</script>
